<template>
  <!-- 活动回显弹框 -->
  <el-tooltip v-model="showDetail" :disabled="!activeDetail.type" class="active-detail" effect="dark" placement="right">
    <span class="cursor"><slot /></span>
    <div slot="content" class="active_item_box">
      <div class="active_item">
        <span>活动名称：</span>
        <span class="active_name">{{ activeDetail.name }}</span>
      </div>
      <div class="active_item">
        <span>活动时间：</span>
        <span class="active_time">{{ activeDetail.startTime }} 至 {{ activeDetail.endTime }}</span>
      </div>
      <div class="active_item">
        <span>活动介绍：</span>
        <span>{{ activeDetail.desc||'-' }}</span>
      </div>
      <div class="active_item_label">
        <template v-if="activeDetail.type=='SWAPE'">
          满<span class="ac_label">{{ activeDetail.conditionMoney-0 }}</span>
          再加<span class="ac_label2">{{ activeDetail.extraMoney-0 }}，可换购产品</span>
        </template>
        <template v-if="activeDetail.type=='DERATE'">
          满<span class="ac_label">{{ activeDetail.conditionMoney-0 }}</span>
          减<span class="ac_label2">{{ activeDetail.derateMoney-0 }}</span>
          <template v-if="activeDetail.isSuperposition">（可叠加）</template>
        </template>
      </div>
      <div v-if="Array.isArray(activeDetail.activityGoods)" class="active_list_content no_scrollbar">
        <!-- 展示满换产品 -->
        <div v-for="inItem in activeDetail.activityGoods" :key="inItem.id" class="product_list">
          {{ inItem.goodsName }}
          <img :src="inItem.goodsImg" class="active_img" :onerror="$siteImg">
          x {{ inItem.meetSum||(Array.isArray(inItem.targetGoods)&&inItem.targetGoods.length>0?inItem.targetGoods[0].meetSum:0) }}
        </div>
      </div>
    </div>
  </el-tooltip>
</template>

<script>
export default {
  props: {
    activeDetail: {
      required: true,
      type: Object,
      default: () => {
        return {}
      }
    },
    show: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      showDetail: false
    }
  },
  watch: {
    show: {
      handler() {
        this.showDetail = this.show
      }
      // immediate: true
    }
  }
}
</script>

<style lang="scss" scoped>
.active-detail{
  display: inline-block;
  width: 100%;
}
</style>
